<template>
    <div class="art-full-height">
        <ElRow :gutter="20" style="margin-bottom: 1.5rem;">
            <ElCol :sm="24" :md="24" :lg="24">
                <Banner @withdraw-success="handleWithdrawSuccess" />
            </ElCol>
        </ElRow>
        <ElCard class="art-table-card" shadow="never" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
            <div class="header">
                提现记录
            </div>
            <el-tabs v-model="tableLayout" class="demo-tabs" @tab-click="handleTabChange">
                <el-tab-pane label="全部订单" name="1">
                    <!-- <recommendedLink /> -->
                </el-tab-pane>
                <el-tab-pane label="待审核" name="2">
                    <!-- <recommendationRecord /> -->
                </el-tab-pane>
                <el-tab-pane label="已通过" name="3">
                    <!-- <withdrawalHistory /> -->
                </el-tab-pane>
                <el-tab-pane label="已拒绝" name="4">
                    <!-- <withdrawalHistory /> -->
                </el-tab-pane>
            </el-tabs>
            <!-- <el-form :model="searchForm" ref="searchFormRef" label-width="auto" style="padding-bottom: 1.5rem;">
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="状态：" prop="withdrawalStatusList">
                            <el-select v-model="searchForm.withdrawalStatusList" placeholder="请选择状态" clearable
                                @change="getData">
                                <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form> -->
            <ArtTable :data="tableData" :loading="tableLoading" :currentPage="pageNum" :pageSize="pageSize"
                :total="pageTotal" @current-change="currentChange" @size-change="sizeChange">
                <template #default>
                    <el-table-column label="提现日期" prop="createTime" align="center" />
                    <!-- <el-table-column label="备注" prop="remark" align="center" /> -->
                    <el-table-column label="提现金额" prop="price" align="center">
                        <template #default="scope">{{ scope.row.price / 100 }}</template>
                    </el-table-column>
                    <el-table-column label="手续费" prop="feePrice" align="center">
                        <template #default="scope">{{ scope.row.feePrice / 100 }}</template>
                    </el-table-column>
                    <el-table-column label="到账金额" prop="actualPrice" align="center">
                        <template #default="scope">{{ scope.row.actualPrice / 100 }}</template>
                    </el-table-column>
                    <el-table-column label="提现方式" prop="withdrawalType" align="center" #default="scope">
                        {{ scope.row.withdrawalType === '01' ? '微信' : scope.row.withdrawalType === '02' ? '支付宝' :
                            scope.row.withdrawalType === '03' ? '银行卡' : '' }}
                    </el-table-column>
                    <el-table-column label="订单号" prop="withdrawalNo" align="center" />
                    <el-table-column label="提现状态" prop="withdrawalStatus" align="center">
                        <template #default="scope">
                            <el-tag :type="getTagType(scope.row.withdrawalStatus)">
                                {{ scope.row.withdrawalStatus < 5 ? buildTagText(scope.row.withdrawalStatus) : '' }}
                                    </el-tag>
                        </template>
                    </el-table-column>
                </template>
            </ArtTable>
        </ElCard>
    </div>
</template>
<script lang="ts" setup>
import { FormInstance } from 'element-plus'
import { getWithdrawalRecord, homePageInfo } from '@/api/agent'
import Banner from './modules/banner.vue'
import { useUserStore } from '@/store/modules/user'

const showSearchBar = ref(false)
const userStore = useUserStore()
const userInfo: any = computed(() => userStore.getUserInfo)

const tableLayout = ref('1')
const handleTabChange = (e: any) => {
    // replayKey.value = new Date().getTime()
    if (e.index === '0') {
        searchForm.withdrawalStatusList = []
    } else if (e.index === '1') {
        searchForm.withdrawalStatusList = [0, 1]
    } else if (e.index === '2') {
        searchForm.withdrawalStatusList = [2]
    } else if (e.index === '3') {
        searchForm.withdrawalStatusList = [3, 4]
    }
    getData()
}
const searchForm = reactive<any>({
    // status: ''
    withdrawalStatusList: []
})

const statusList = [
    {
        value: '0',
        label: '待审核'
    },
    {
        value: '1',
        label: '审核通过'
    },
    {
        value: '2',
        label: '已打款'
    },
    {
        value: '3',
        label: '审核驳回'
    },
    {
        value: '4',
        label: '打款失败'
    }
]

const searchFormRef = ref<FormInstance>()
const tableData = ref([])
const tableLoading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)


const getData = async () => {
    try {
        tableLoading.value = true
        const res = await getWithdrawalRecord({
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            withdrawalStatusList: searchForm.withdrawalStatusList,
            id: userInfo.value.id
        })
        if (res.code === '0') {
            tableData.value = res.data.list
            pageTotal.value = res.data.total
        }
    } catch { } finally {
        tableLoading.value = false
    }
}

const currentChange = (val: number) => {
    pageNum.value = val
    getData()
}

const sizeChange = (val: number) => {
    pageSize.value = val
    pageNum.value = 1
    getData()
}

const getTagType = (status: number) => {
    switch (status) {
        case 0:
            return 'info'
        case 1:
            return 'primary'
        case 2:
            return 'primary'
        case 3:
            return 'danger'
        case 4:
            return 'warning'
    }
}

const buildTagText = (status: number) => {
    let text = ''
    if (status === 0) {
        text = '待审核'
    } else if (status === 1) {
        text = '审核通过'
    } else if (status === 2) {
        text = '已打款'
    } else if (status === 3) {
        text = '审核驳回'
    } else {
        text = '打款失败'
    }
    return text
}
const handleWithdrawSuccess = () => {
    tableLayout.value = '1'
    pageNum.value = 1
    searchForm.withdrawalStatusList = []
    getData()
}
onMounted(() => {
    getData()
})
</script>
<style lang="scss" scoped>
.header {
    margin-bottom: 20px;
    font-size: 25px;
}
</style>